---
title: Customize theme
description: Learn how HeroUI enables effortless customization of default themes.
---

# Customize theme

HeroUI provides `light` and `dark` themes that can be customized to match your needs. You can also create custom themes based on these defaults, using [Layout](/docs/customization/layout) and [Color](/docs/customization/colors) tokens.

<CarbonAd/>

## Customizing Layout

Layout tokens let you customize spacing, typography, borders and more - either globally or per theme.

### Global Layout Customization

You can customize border radius, border width, and disabled opacity across all themes by modifying your `tailwind.config.js` file:

```js {9-19}
// tailwind.config.js
const {heroui} = require("@heroui/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    heroui({
      layout: {
        disabledOpacity: "0.3", // opacity-[0.3]
        radius: {
          small: "2px", // rounded-small
          medium: "4px", // rounded-medium
          large: "6px", // rounded-large
        },
        borderWidth: {
          small: "1px", // border-small
          medium: "1px", // border-medium
          large: "2px", // border-large
        },
      },
      themes: {
        light: {},
        dark: {},
      },
    }),
  ],
};
```

Layout tokens are used across all HeroUI components. For example, the [Button](/docs/components/button) component uses `radius` and `borderWidth` tokens for its styling. Here's how it looks with the customized values:


```jsx
import {Button} from "@heroui/react";

export default function App() {
  return (
    <div className="flex gap-4">
      <Button variant="bordered" radius="md">
        Button
      </Button>
      <Button isDisabled color="primary" radius="md">
        Disabled
      </Button>
    </div>
  );
}
```

<Spacer y={4} />

import customLayout from "@/content/customization/customize-theme/custom-layout";

<CodeDemo title="Custom layout example" showEditor={false} files={customLayout} />

> See the [Layout](/docs/customization/layout#default-layout) section for more details about the available tokens.

### Customizing Colors

Now, Let's say you wish to modify the primary and focus colors of the dark theme. This can 
be achieved by adding the following code to your `tailwind.config.js` file.

```js {10-16}
// tailwind.config.js
const {heroui} = require("@heroui/react");

/** @type {import('tailwindcss').Config} */
module.exports = {
  plugins: [
    heroui({
      themes: {
        dark: {
          colors: {
            primary: {
              DEFAULT: "#BEF264",
              foreground: "#000000",
            },
            focus: "#BEF264",
          },
        },
      },
    }),
  ],
};
```

This modification will impact all components using the `primary` color. For instance, 
the [Button](/docs/components/button) component uses the `primary` color as background color when the 
variant is `solid` or `ghost`.

```jsx
import {Button} from "@heroui/react";

export default function App() {
  return (
    <div className="flex gap-4">
      <Button color="primary" variant="solid">Solid</Button>
      <Button color="primary" variant="ghost">Ghost</Button>
    </div>
  );
}
```

<Spacer y={4} />

import customColors from "@/content/customization/customize-theme/custom-colors";

<CodeDemo title="Custom colors example" showEditor={false} files={customColors} />

> 🎉 That's it! You have successfully customized the default theme. See the [Colors](/docs/customization/colors) 
> section for more details about the available semantic colors and color tokens. 
